<template>
  <div class="n-register code-container">
    <van-nav-bar :title="header" left-arrow @click-left="onClickLeft"/>
    <div class="code-content">
      <div class="code-content-title"><p>扫二维码向我付款</p></div>
      <div class="code-content-img">
        <!--<div class="code-img"><img :style='{backgroundImage:"url(\"" + codeBase64 + "\")"}'></div>-->
        <div class="code-img" id="qrCode">
          <vue-qr
            :text="config.text"
            :margin="0"
          >
          </vue-qr>
        </div>
        <div v-show="setMoney" class="code-content-pay-number">
          <span>￥<i>{{amount}}</i></span>
        </div>
        <div class="code-link">
          <van-row>
            <van-col :offset="5" :span="5"><a href="javascript:;" @click="setAmount">设置金额</a></van-col>
            <van-col :span="4"><span>|</span></van-col>
            <van-col :span="5"><a href="javascript:;" @click="saveQrcode">保存图片</a></van-col>
          </van-row>
        </div>
      </div>
      <!--<div class="code-content-money">-->
      <!--<div class="code-content-icon"><i></i>微信支付</div>-->
      <!--<div class="code-content-money-text">￥{{ moneyText }}</div>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  import VueQr from 'vue-qr';
  import {
    Icon,
    Row,
    Col,
    Uploader,
    Loading,
    Cell,
    CellGroup,
    Popup,
    Button,
    NavBar,
    Toast,
    Actionsheet
  } from 'vant';

  export default {
    name: 'collection-code',
    components: {
      VueQr,
      [Loading.name]: Loading,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [Popup.name]: Popup,
      [Actionsheet.name]: Actionsheet,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data() {
      return {
        setMoney: false,
        amount: 0,
        config: {
          text: 'www.dph168.com'
        },
        header: '收款码收款',
        moneyText: '100.00'
      };
    },
    created() {
      const amount = this.$route.query.amount;
      if (amount) {
        this.setMoney = true;
        this.amount = Number(amount).toFixed(2);
      } else {
        this.setMoney = false;
      }
    },
    methods: {
      onClickLeft() {
        this.$router.push('reconciliation');
      },
      saveQrcode() {
        const oQrcode = document.querySelector('#qrCode img');
        const url = oQrcode.src;
        const a = document.createElement('a');
        const event = new MouseEvent('click');
        a.download = '我的二维码';
        a.href = url;
        a.dispatchEvent(event);
      },
      // 设置金额
      setAmount() {
        this.$router.push('setAmount');
      }
    }
  };
</script>
<style lang="less" scoped>
  .van-hairline--bottom {
    &::after {
      border-bottom-width: 0
    }
  }
  .code-container{
    width: 100vw;
    height: 100vh;
    /deep/ .van-nav-bar {
      .van-icon{
        color: #fff;
      }
    }
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
    /deep/ .van-nav-bar {
      background-color: #2F66F3;
    }
    background-color: #2F66F3;
    .code-content {
      margin-top: .16rem;
      margin-left: .3rem;
      margin-right: .3rem;
      width: 6.9rem;
      height: 9.7rem;
      border-radius: .06rem;
      overflow: hidden;
      p {
        margin: 0;
      }
      &-pay-number {
        text-align: center;
        font-size: 26px;
        /*padding: .2rem;*/
        font-weight: 400;
        padding-top: 5rem;
        i {
          font-weight: bold;
          font-style: normal;
        }
      }
      .code-content-title {
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        background: #F2F5FD;
        p {
          color: #333;
          font-size: 14px;
        }
      }
      .code-content-img {
        position: relative;
        height: 7.7rem;
        background: #fff;
        .code-img {
          position: absolute;
          top: 1rem;
          left: 1.65rem;
          right: 1.65rem;
          margin-bottom: 1rem;
          width: 3.6rem;
          height: 3.6rem;
          /deep/img {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            font-size: 0;
          }
        }
        .code-link {
          position: absolute;
          top: 6rem;
          width: 100%;
          text-align: center;
          .van-col {
            a {
              color: #2F66F3;
              font-size: 13px;
            }
            span {
              color: #C7C7C7;
              font-size: 13px;
            }
          }
        }
      }
      .code-content-money {
        padding: 0 .3rem;
        height: 1rem;
        line-height: 1rem;
        background: #F7F7F7;
        .code-content-icon {
          float: left;
          color: #333;
          font-size: 13px;
        }
        .code-content-money-text {
          float: right;
          color: #333;
          font-size: 14px;
        }
      }
    }
  }
</style>
